<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>开票中心</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant -->
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <top title="开票中心" close="true"></top>
          <div class="flex jcsb aic lkColor topTip">
            <div class="flex">
              <div class="mgr8"><van-icon name="circle" size="10" /></div>
              <div class="fs14">直豆充值可开发票</div>
            </div>
            <div class="stag">充值直豆</div>
          </div>
          <!-- 选项栏 -->
          <div class="pd20">
            <div class="flex jcsb aic">
              <div class="flex aic">
                <div class="fs24 fwb mgr8">可开发票充值记录</div>
                <div><van-icon name="arrow-down" /></div>
              </div>
              <div class="fs14">开票记录</div>
            </div>
            <div class="mgt10 flex jcsb">
              <div>
                <div
                  class="mtag"
                  :class="active==0? ['lkColor','fwb']:'grey'"
                  @click="active=0"
                >
                  全部
                </div>
                <div
                  class="mtag"
                  :class="active==1? ['lkColor','fwb']:'grey'"
                  @click="active=1"
                >
                  近三月
                </div>
                <div
                  class="mtag"
                  :class="active==2? ['lkColor','fwb']:'grey'"
                  @click="active=2"
                >
                  近一年
                </div>
              </div>
              <div class="mtag grey">
                自定义开票时间<van-icon name="down" size="7" />
              </div>
            </div>
          </div>
          <!-- 记录 -->
          <div>
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="当前额度为0,无法开发票"
              image-size="120"
            >
              <div class="prColor">开发票记录</div>
            </van-empty>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .topTip {
    padding: 6px 20px;
  }
  .mtag {
    font-size: 0.8rem;
    border-radius: 5px;
    padding: 6px 15px;
  }
  .stag {
    padding: 4px 8px;
    border-radius: 10px;
  }
  .grey {
    background-color: #eee;
    color: #666;
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      active: 0,
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
